<!--suppress JSValidateTypes -->
<template lang="pug">
q-input(v-model="selected_datetime" dense hide-bottom-space
filled clearable  unmasked-value lazy-rules
:rules="rules")
  template(v-slot:append)
    q-icon(name="event" class="cursor-pointer")
  q-popup-edit(v-model="selected_datetime" title="选择时间" buttons auto-save
    v-slot="scope")
    div(class="q-gutter-xs  row items-start")
      q-date(v-model="scope.value" mask="YYYY-MM-DD HH:mm:ss" :options="dateOptions")
      q-time(v-model="scope.value" mask="YYYY-MM-DD HH:mm:ss" format24h :options="timeOptions(scope.value)")
</template>

<script setup>

import {computed} from "vue";
import {testPattern} from "~/utils/common/patterns.js";
import {format} from 'quasar'

const {pad} = format

const props = defineProps(['modelValue', 'startTime', 'endTime', 'excludeDate', 'includeDate'])

const emit = defineEmits(['update:modelValue'])

const selected_datetime = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const dateOptions = (date) => {
  const [year, month, day] = date.split('/')
  const _date = `${year}-${pad(month, 2)}-${pad(day, 2)}`
  if (props.startTime && _date < props.startTime.slice(0, 10)) return false
  if (props.endTime && _date > props.endTime.slice(0, 10)) return false
  if (props.excludeDate && props.excludeDate.includes(date)) return false
  return !(props.includeDate && !props.includeDate.includes(date));

}

// const timeOptions = (val) => {
//   return (hr, min) => {
//     if (!val) return false
//     const _date = val.slice(0, 10)
//     // 如果选择的日期是开始日期, 则时间不能小于开始时间
//     if (props.startTime && _date == props.startTime.slice(0, 10)) {
//       let [startHr, startMin] = props.startTime.slice(11, 19).split(':')
//       if (hr < startHr) return false
//       if (hr == startHr && min < startMin && min != null) return false
//     }
//     // 如果选择的日期是结束日期, 则时间不能大于结束时间
//     if (props.endTime && _date == props.endTime.slice(0, 10)) {
//       let [endHr, endMin] = props.endTime.slice(11, 19).split(':')
//       if (hr > endHr) return false
//       if (hr == endHr && min > endMin && min != null) return false
//     }
//     return true
//   }
// }


const rules = [
  val => (val && val.length > 0) || '请选择日期时间',
  val => testPattern.dateAndTime(val) || '日期时间格式不正确',
]


</script>

<style scoped>

</style>